<template>
	<swiper class="image-container" previous-margin="45rpx" next-margin="45rpx" style="max-width: 765px;"  :current='grade_id' @change="swiperChange">
		<swiper-item :class="currentIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in imgList" :key="item[urlKey]">
			<view style='position: relative;'>
				<image @click="clickImg(item)"  :class="currentIndex == index ? 'item-img' : 'item-img-side'" :src="item[urlKey]" lazy-load :style="dontFirstAnimation ? 'animation: none;' : ''" mode="aspectFill" class="top-bg-index"></image>
				<!-- 初级会员 -->
				<view class="top-title-left" v-if="index === 0">
					<view class="vip_name">
						{{index === 0 ?"初级会员":index === 1?"铂金会员":"钻石会员"}}
					</view>
					<view class="text-del" v-show="index === 0">
						您是普通会员，可免费使用平台所有功能，升级会员等级可以获得更高的折扣！
					</view>
					<view class="duo-icon-bg" v-show="index === 0">
						<image src="../../static/level/vip_next_duo_icon.png" class="duo-icon-bg-img"></image>
						<view class="duo-icon-bg-text">
							向右滑动查看解锁更多等级
						</view>
						<view class="icon-chevronsrightshuangyoujiantou  iconfont duo-icon-bg-right" ></view>
				
					</view> 
				</view>
				<view class="top-title-right" v-if="index===0 && grade_id === 0">
					<image src="../../static/level/vip_this_lv.png" class="top-title-right-item"></image>
				</view>
				<!-- 铂金会员 -->
				<view class="top-title-left" v-if="index === 1">
					<view class="vip_name">
						{{index === 0 ?"初级会员":index === 1?"铂金会员":"钻石会员"}}
					</view>
					<view class="text-del" v-show="grade_id<1">
						补差{{platinum_price}}元即可马上升级，尊享铂金会员权益！推广更赚钱！
					</view>
					<view class="text-del" v-show="grade_id>0">
						您是铂金会员,可免费使用平台所有功能，平均每笔折扣提升2%
					</view>
					<view class="duo-icon-bg">
						<image src="../../static/level/vip_next_duo_icon.png" class="duo-icon-bg-img"></image>
						<view class="duo-icon-bg-text">
							升级后平均每笔多赚{{platinum}}%
						</view>
						<view class="icon-chevronsrightshuangyoujiantou  iconfont duo-icon-bg-right" style=""></view>
					</view>
				</view>
				<view class="top-title-right-no" v-if="index === 1 && grade_id<1">
					<image src="../../static/level/vip_no.png" class="top-title-right-item"></image>
				</view>
				<view class="top-title-right" v-if="index===1 && grade_id < 1">
					<image src="../../static/level/vip_next_lv.png" class="top-title-right-item"></image>
				</view>
				<view class="top-title-right" v-if="index===1 && grade_id === 1">
					<image src="../../static/level/vip_this_lv.png" class="top-title-right-item"></image>
				</view>
				<!-- 钻石会员 -->
				<view class="top-title-left" v-if="index === 2">
					<view class="vip_name">
						{{index === 0 ?"初级会员":index === 1?"铂金会员":"钻石会员"}}
					</view>
					<view class="text-del" v-show="grade_id < 2">
						补差{{diamond_price}}元即可马上升级，尊享钻石会员权益！推广更赚钱！
					</view>
					<view class="text-del" v-show="grade_id > 1">
						您是钻石会员，可免费使用平台所有功能，并且享有最高折扣，收益更上一层楼
					</view>
					<view class="duo-icon-bg">
						<image src="../../static/level/vip_next_duo_icon.png" class="duo-icon-bg-img"></image>
						<view class="duo-icon-bg-text">
							升级后平均每笔多赚{{diamond}}%
						</view>
						<view class="icon-chevronsrightshuangyoujiantou  iconfont duo-icon-bg-right" style=""></view>
					</view>
				</view>
				<view class="top-title-right-no" v-if="index === 2 && grade_id!=2">
					<image src="../../static/level/vip_no.png" class="top-title-right-item"></image>
				</view>
				<view class="top-title-right" v-if="index===2 && grade_id!=2">
					<image src="../../static/level/vip_next_lv.png" class="top-title-right-item"></image>
				</view>
				<view class="top-title-right" v-if="index===2 && grade_id === 2">
					<image src="../../static/level/vip_this_lv.png" class="top-title-right-item"></image>
				</view>
			</view>

		</swiper-item>
	</swiper>
</template>
<script>
	export default {
		props: {
			imgList: {
				type: Array,
				default() {
					return []
				}
			},
			urlKey: {
				type: String,
				default() {
					return ''
				}
			},
			grade_id:{
				type:Number,
				default:0
			},
			primail:{
				type:String,
				default:""
			},
			platinum:{
				type:String,
				default:""
			},
			diamond:{
				type:String,
				default:""
			},
			platinum_price:{
				type:String,
				default:""
			},
			diamond_price:{
				type:String,
				default:""
			}
		},
		data() {
			return {
				currentIndex: 0,
				dontFirstAnimation: true
			}
		},
		methods: {
			swiperChange(e) {
				this.dontFirstAnimation = false
				this.currentIndex = e.detail.current
				this.$emit('selected', this.currentIndex)
			},
			clickImg(item) {
				
			}
		}
	}
</script>
<style lang="scss">
	.top-title-right-item{
		width: 166rpx;
		margin-top: 45rpx;
		height: 46rpx;
	}
	.top-title-right{
		position: absolute;
		right: 0;
		top: 16rpx;
		flex: 1;
		display: flex;
		/* #ifdef MP-KUAISHOU */
		right: 3.8vw;
		/* #endif */
	}
	.top-title-right-no{
		position: absolute;
		right: 0;
		top: 80rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		/* #ifdef MP-KUAISHOU */
		right: 3.8vw;
		/* #endif */
	}
	.duo-icon-bg-right{
		position: absolute;
		width: 40rpx;
		height: 40rpx;
		right: 30rpx;
		top: 14rpx;

	}
	.duo-icon-bg-text{
		color: #a86f0b;
		font-size: 24rpx;
		position: absolute;
		left: 36rpx;
		top: 9rpx;
		line-height: 50rpx;
	}
	.duo-icon-bg-img{
		width: 410rpx;
		height: 64rpx;
	}
	.duo-icon-bg{
		// left: 0px;
		// bottom: 30rpx;
		width: 410rpx;
		height: 64rpx;
		position: relative;
		margin-top: 40rpx;
		/* #ifdef MP-KUAISHOU */
		bottom: 8vw;
		/* #endif */ 
		/* #ifdef MP-KUAISHOU */
		margin-top: 13vw;
		/* #endif */ 
	}
	.text-del{
		flex: 1;
		margin-top: 7px;
		color: #bbbbba;
		font-size: 12px;
		width: 450rpx;
		
	}
	.vip_name{
		font-size: 20px;
		font-weight: 800;
		color: #a47e42;
	}
	.top-title-left{
		position: absolute;
		display: flex;
		top: 40rpx;
		left: 40rpx;
		// bottom: 18rpx;
		flex-direction: column;
		/* #ifdef MP-KUAISHOU */
		// top: 5vw;
		/* #endif */ 
	}
	.top-bg-index{
			display: inline-block;
	    overflow: hidden;
	    position: relative;
			/* #ifdef MP-KUAISHOU */ 
			height: 48vw;
			/* #endif */ 
	}
	.image-container {
		width: 750rpx;
		height: 350rpx;
		
	}

	.item-img {
		width: 630rpx;
		height: 300rpx;
		border-radius: 14rpx;
		animation: to-big .3s;
		
	}

	.swiper-item {
		width: 630rpx;
		height: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.item-img-side {
		width: 630rpx;
		height: 260rpx;
		border-radius: 14rpx;
		animation: to-mini .3s;
	}

	.swiper-item-side {
		width: 630rpx;
		height: 260rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	@keyframes to-mini
	{
		from {
			height: 300rpx;
		}
		to {
			height: 260rpx;
		}
	}
	@keyframes to-big
	{
		from {
			height: 260rpx;
		}
		to {
			height: 300rpx;
			
		}
	}
</style>
